<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				position: absolute;
			}
		</style>
	</head>

	<body>

		<ul class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li></li>
		</ul>

		<p>
			<div>
				<img />
				<img />
			</div>
		</p>

		<p>
			<div>
				<img />
			</div>
		</p>
		
		
		 <div class="div01">
		 	
		 </div>
		 
		  <div class="div02">
		 	
		 </div>
		 
		 <div class="div03">
		 	
		 </div>
		

	</body>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//$ 代表jquery对象
		var lis = document.querySelectorAll(".list>li"); //dom集合
		//console.log(lis);
		//使用jquery拿到的对象，都只能使用jquery的API来操作。
		var lisJ = $(".list>li"); //拿到的是jquery对象
		//  var lisJ= $(".list>li:nth-child(1)");
		//他会修改所有的
		//lisJ.text("修改");
		console.log(lisJ);
		
		$(".list>li").click(function(){alert(123);});
		//1,为什么要用jquery？
		/*
		 * 答:1,代码量变少，简洁
		      2,专注于功能。底层会自动帮你兼容
		 * */
		//eq通过索引获取元素	
		var second = $(".list>li").eq(1);
		//修改：传参数
		second.text("第二个"); //.html()
		//获取：不传参数
		//alert(second.text()); 
		$(".list>li").first().text("第一个");
		$(".list>li").last().text("最后一个");
		//获得所有的子类
		$(".list").children().text("所有的孩子");
		//从自身往下找。
		$(".list").find("li").text("find");
		//紧邻的下一个
		$(".list>li").first().next().text("2");
		//这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
		console.log($(".list").offsetParent());
		//获得直接父元素。如果，选中的是多个元素，意味着父元素也会有多个。
		console.log($("img").parent());
		//尽量别用：相同的标签，嵌套不同，结果不一样。
		/**
		 * console.log($("img").parents());
		 */
		// .siblings() 获得其他兄弟元素
		$(".list>li").last().text("最后一个").siblings().text("你们都是其他");
	    	
	    //修改CSS :属性名可以带“”,也可以不带
	    $(".list>li").last().css({color:"#FF0000",backgroundColor:"#000000",width:"900px"});
	    //获得CSS
	    console.log($(".list>li").last().css("width"));
	    
	    
	    //动画
	    //隐藏：hide()  三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
	    //显示：show()
	   /* $(".div01")
	    .css({width:"200px",height:"200px",backgroundColor:"#FF0000"})
	    .hide("slow",function(){
	    	//回调。动画执行完毕调用
           //alert("隐身成功~~~");
           //$(".div01").show("slow");
	    });*/
	    
	    /* $(".div02")
	     .css({width:"200px",height:"200px",backgroundColor:"#FF0000"})
	     .slideUp("slow");*/
	    
	    //重点：animate
	    $(".div02")
	     .css({width:"200px",height:"200px",backgroundColor:"#FF0000"})
	     .delay(2000) //延时需要写在动画执行前，后面会失效
	     .animate({width:"800px"},2000,function(){
	     	//动画完毕执行
         //alert("我执行完毕！！");
         
	     }) ;
	    //.finish() 作用。瞬间把动画执行完毕，也会忽略延时。也就是停止在最后状态
	    //.stop() 停止在当前动画状态
	    setTimeout(function(){$(".div02").stop();},3000);
	    
	    
	    
	     //底层用的addEventListenr() 。意味着监听事件可以叠加。
	    /* $(".div03")
	     .css({width:"100px",height:"100px",backgroundColor:"#FFFF00"})
	     .click(function(){
	     	alert("我被点击了1~~~");
	     }).click(function(){
	     	alert("我被点击了2~~~");
	     });*/
	    
	    $(".div03")
	     .css({width:"100px",height:"100px",backgroundColor:"#FFFF00"})
	     .click(function(e){
	     	//永远不要在监听器里面查找元素
	     	//$(".div03").text("我被点击了~~");
	     	//如何把dom对象变成jquery对象
	     	// $(dom)
	     	  $(e.target).text("我被点击了~~2");
	     	//$(this).text("我被点击了~~2");  //尽量不要用this
	     	
	     });
	     //jquery增删元素
	    
	     //模拟手动事件
	     $(".div03").trigger("click");
	     
	     //hover
	     $(".div03").hover(
	     function(){console.log("进去");},
	     function(){console.log("出来");});
	    
         //$(".div03").remove();
         //$(".div03").empty();
         $("*").css({margin:"0px",padding:"0px"});
         
         
         
         
         
	</script>

</html>